<template>
	<div id="cxdw_blx" :style="{ height: '300px', width: '100%' }"></div>
</template>

<script setup>
	import * as echarts from 'echarts';
	import { onMounted, onUnmounted, watch, ref, reactive } from 'vue';
	const props = defineProps({
		pdata: {
			type: Array,
			default: [],
		},
	});

	let myChart = null;
	let pData = [];
	const initOption = function () {
		var colorList = ['#249EFF', '#313CA9', '#21CCFF'];
		var total = {
			name: '总报修数量',
			value: 0,
		};
		echarts.util.each(pData, function (item, index) {
			total.value += item.value;
			item.itemStyle = {
				normal: {
					color: colorList[index],
				},
			};
		});
		let option = {
			title: [
				{
					text: total.name,
					left: '49.5%',
					top: '44%',
					textAlign: 'center',
					textBaseline: 'middle',
					textStyle: {
						color: '#4E5969',
						fontWeight: 'normal',
						fontSize: 14,
					},
				},
				{
					text: total.value,
					left: '49.3%',
					top: '53%',
					textAlign: 'center',
					textBaseline: 'middle',
					textStyle: {
						color: '#1E222A',
						fontWeight: '700',
						fontSize: 18,
					},
				},
			],
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)',
			},
			series: [
				{
					hoverAnimation: false, //设置饼图默认的展开样式
					radius: [70, 100],
					name: '报修来源',
					type: 'pie',
					selectedMode: 'single',
					selectedOffset: 16, //选中是扇区偏移量
					clockwise: true,
					startAngle: 90,
					label: {
						normal: {
							textStyle: {
								fontSize: 14,
								color: '#1D2129',
							},
							formatter: '{b}: {c} ({d}%)',
						},
					},
					labelLine: {
						normal: {
							lineStyle: {
								color: '#999',
							},
						},
					},
					data: pData,
				},
			],
		};
		return option;
	};

	const initEchart = function () {
		const options = initOption();
		let chartDom = document.getElementById('cxdw_blx');
		if (chartDom) {
			let myChart = echarts.init(chartDom);
			myChart.setOption(options);
		}
	};
	watch(
		() => props.pdata,
		() => {
			pData = props.pdata;
			initEchart();
		},
		{
			immediate: true,
		}
	);
	onMounted(() => {
		initEchart();
	});
	onUnmounted(() => {
		destroyChart();
	});
	const destroyChart = function () {
		if (myChart) {
			myChart.dispose();
			myChart = null;
		}
	};
</script>
